<template>
    <div class="panel admin-panel">
        <div>&nbsp;&nbsp;
            <input type="hidden" value="1" name="pageNum" id="pageNum" >
            <input type="hidden" value="" name="pageSize" id="pageSize">
            工单号:<input type="text" name="workorderNumber" id="workorderNumber" class="workorderNumber" v-model="workOrderVo.workOrder.workorderNumber" style="width:100px">  
            &nbsp;项目:<el-input v-model="workOrderVo.workOrder.projectno" placeholder="项目编号" size="small" style="width:140px" class="el-input"></el-input>  
            &nbsp;
               执行人:<el-input v-model="workOrderVo.workOrder.operationalStaffId.workNumber" placeholder="员工工号" size="small" style="width:140px" class="el-input" @blur="hr"></el-input>  
            &nbsp;
            &nbsp;状态:<el-select v-model="workOrderVo.workOrder.state" placeholder="请选择">
    <el-option
      v-for="item in options"
      :key="item.value"
      :label="item.label"
      :value="item.value">
    </el-option>
  </el-select>  
            &nbsp;
            <el-button type="primary" @click="page()">筛选</el-button>
            <el-button type="success" @click="reset()">重置</el-button>
        </div>



        <el-table :data="workOrderes" stripe style="width: 100%" v-loading="loding" element-loading-text="拼命加载中" 
            highlight-current-row @current-change="tableSel">
            <el-table-column type="index" label="序号" width="100">
            </el-table-column>
            <el-table-column prop="workorderNumber" label="工单号" width="100">
            </el-table-column>
            <el-table-column prop="projectId.no" label="项目编号" width="100">
            </el-table-column>
            <el-table-column prop="materialNumberId.materialNumber" label="物料编号" width="100">
            </el-table-column>
            <el-table-column prop="materialNumberId.materialName" label="物料名称" width="100">
            </el-table-column>
            <el-table-column prop="productionPlannerId.name" label="生产计划员" width="100">
            </el-table-column>
            <el-table-column prop="startdate" label="开工日期" width="150">
            </el-table-column>
            <el-table-column prop="overdate" label="计划结束日期" width="150">
            </el-table-column>
            <el-table-column prop="operationalStaffId.workNumber" label="执行人员" width="100">
            </el-table-column>
            <el-table-column prop="state" label="工单状态" width="100">
            </el-table-column>
        </el-table>
        <br />
        <div>&nbsp;&nbsp;
            <input type="button" class="button" value="首页" @click="page('start')" />&nbsp;
            <input type="button" class="button" value="上一页" @click="page('up')" />
            当前第<input type="text" :value="workOrderVo.currPage" @change="page('text')" style="width:40px;"
                id="currPage">页/共
            {{ totalPage }}页
            <input type="button" class="button" value="下一页" @click="page('down')" />&nbsp;
            <input type="button" class="button" value="尾页" @click="page('end')" />
            总数量:{{ totalNum }}&nbsp;
            分页大小:
            <select id="selPageSize" v-model="workOrderVo.pageSize" @change="page('sel')">
                <option value="2">2</option>
                <option value="5">5</option>
                <option value="10">10</option>
                <option value="20">20</option>
                <option value="50">50</option>
            </select>
        </div>
    </div>

</template>

<script>
module.exports = {
    data() {
        return {
            input: '',
            workOrderVo: {
                workOrder: {
                    workorderNumber: "",
                    projectno: "",
                    operationalStaffId:{
                        id:"",
                        workNumber: "" 
                    },
                    state:""
                },
                currPage: 1,
                pageSize: 5,

            },
            options: [{
          value: '未分配',
          label: '未分配'
        }, {
          value: '已分配',
          label: '已分配'
        }, {
          value: '已完成',
          label: '已完成'
        
        }],
        value: '',
            totalPage: 1,
            totalNum: 0,

            workOrderes: [],
            loding: true
        }
    },
    created: function () {
        this.$http.post("/production/woc/getByCondition", this.workOrderVo).then(r => {
            if (r.data.code == "200") {
                this.workOrderes = r.data.data.data;
                console.log(r.data.data.data)
                this.workOrderVo.currPage = r.data.data.currPage;
                this.workOrderVo.pageSize = r.data.data.pageSize;
                this.totalPage = r.data.data.totalPages;
                this.totalNum = r.data.data.totalNums;
                this.loding = false;
            } else if (r.data.code == "701") {
                alert("登录已过期,请重新登录");
            } else if (r.data.code == "402") {
                alert("权限不足");
            } else {
                alert(r.data.msg);
            }
        })
    },
    methods: {
        hr(){
            this.$http.post("manpower/getPageByCondition",{
                hr:{
                    workNumber:this.workOrderVo.workOrder.operationalStaffId.workNumber
                },
                currPage:1,
                pageSize:1
            }).then(r=>{
                console.log(r.data.data.data)
                if(r.data.code==200){
this.workOrderVo.workOrder.operationalStaffId=r.data.data.data[0]
                }
            })
        },
        page: function (p) {
            if (p == "start") {
                this.workOrderVo.currPage = 1;
            } else if (p == "end") {
                this.workOrderVo.currPage = this.totalPage;
            } else if (p == "up") {
                if (this.workOrderVo.currPage <= 1)
                    return;
                this.workOrderVo.currPage -= 1;
            } else if (p == "down") {
                if (this.workOrderVo.currPage >= this.totalPage)
                    return;
                this.workOrderVo.currPage += 1;
            } else if (p == "text") {
                let val = document.getElementById("currPage").value;
                if (!(val >= 1 && val <= this.totalPage))//非数字校验
                    document.getElementById("currPage").value = 1;
            } else if (p == "sel") {
                this.workOrderVo.currPage = 1;
            }
            this.loding = true;
            this.$http.post("/production/woc/getByCondition", this.workOrderVo).then(r => {
            if (r.data.code == "200") {
                this.workOrderes = r.data.data.data;
                console.log(r.data.data.data)
                this.workOrderVo.currPage = r.data.data.currPage;
                this.workOrderVo.pageSize = r.data.data.pageSize;
                this.totalPage = r.data.data.totalPages;
                this.totalNum = r.data.data.totalNums;
                this.loding = false;
            } else if (r.data.code == "701") {
                alert("登录已过期,请重新登录");
            } else if (r.data.code == "402") {
                alert("权限不足");
            } else {
                alert(r.data.msg);
            }
        })
        },
        reset: function () {
            this.workOrderVo.workOrder.operationalStaffId.workNumber = "";
            this.workOrderVo.workOrder.operationalStaffId.id=0;
            this.workOrderVo.workOrder.projectno = "";
            this.workOrderVo.workOrder.workorderNumber = "";
            this.workOrderVo.workOrder.state = "";
           console.log(this.workOrderVo.workOrder.operationalStaffId.workNumber)
        },
        tableSel:function(val){
            console.log(val.id)
        }
    }
}

</script>

<style >
[class*='el-icon-']:before {
    font-family: element-icons !important;
}
[class*='el-input-']:before {
    size: 20px;
}
</style>